<template>
  <div class="duty-trends">
    <div class="title"></div>
    <div class="main">
      <LineEcharts
          :echartsData="echartsData"
          :color="['rgba(221, 150, 13, 1)']"
          :graphicColor="[['rgba(221, 150, 13, 0.3)', 'rgba(221, 150, 13, 0.1)']]"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from 'vue';
import LineEcharts from '@/components/echarts/lineChart.vue';

const echartsData = {
  label: ['6-25', '6-26', '6-27', '6-28', '6-29', '6-30', '7-1', '7-2'],
  data: [
    {
      name: '',
      value: [80, 82, 120, 110, 99, 101, 111, 99],
    }
  ],
};

defineComponent({ name: 'DutyTrends' });
</script>

<style scoped lang="scss">
.duty-trends {
  @apply w-full h-full;

  .title {
    @apply w-full h-[31px];
    background: url('./assets/title.png') no-repeat center;
  }

  .main {
    @apply w-full h-[228px];
  }
}
</style>
